<script setup lang="ts">
import { onMounted, ref } from 'vue'
import BaseFlow from '@shared/base/base-flow'
import { initData, detailData } from './data.ts'

const initiateFlowList = ref([])
const detailFlowList = ref([])

function onAddInitiate() {
  // 添加数据
  initiateFlowList.value.splice(-2, 0, {
    nodeName: '审批人',
    taskId: null,
    autoPassFlag: null,
    taskDefKey: 'b39e1f911-54c7-4ae5-beea-' + new Date().getTime(),
    nodeType: '10',
    approvalStatus: '30',
    remark: null,
    approvalName: ['莫发达'],
    initiatorName: null,
    branchId: null,
    branchName: null,
    approval: null,
    waitTime: null
  })
}

function onAddDetail() {
  // 添加数据
  detailFlowList.value.splice(-2, 0, {
    nodeName: '审批人',
    taskId: null,
    autoPassFlag: null,
    taskDefKey: 'i6c3b75c0-887c-4f74-a8a0' + new Date().getTime(),
    nodeType: '10',
    approvalStatus: '80',
    remark: null,
    approvalName: ['张正艳'],
    initiatorName: null,
    initiatorBranchName: null,
    branchId: null,
    branchName: null,
    approval: null,
    waitTime: null
  })
}

onMounted(() => {
  setTimeout(() => {
    initiateFlowList.value = initData
  }, 1000)

  setTimeout(() => {
    detailFlowList.value = detailData
  }, 600)
})
</script>

<template>
  <main class="page grid h-page gap-4">
    <BaseFlow.FlowCard
      title="发起流程"
      class="grow"
    >
      <BaseFlow.FlowInitiate :flow-list="initiateFlowList" />
    </BaseFlow.FlowCard>

    <BaseFlow.FlowCard
      title="流程详情"
      class="grow"
    >
      <BaseFlow.FlowDetail :flow-list="detailFlowList" />
    </BaseFlow.FlowCard>

    <footer class="col-span-full flex justify-end bg-white px-4 py-2">
      <el-button
        type="success"
        @click="onAddInitiate"
      >
        添加一条初始流程
      </el-button>
      <el-button
        type="primary"
        @click="onAddDetail"
      >
        添加一条流程详情
      </el-button>
    </footer>
  </main>
</template>
<style scoped lang="less">
.page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
}
</style>
